<template>
    <el-form ref="formRef" :model="formData" :inline="true" class="common-search-form">
        <el-form-item prop="deliverySubject">
            <el-input
                v-model="formData.deliverySubject"
                class="select"
                clearable
                placeholder="请输入"
                @change="(val: any) => onChange(val, 'deliverySubject')"
            >
                <template #prefix>
                    <span class="label">投放主体</span>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="id">
            <el-input
                v-model="formData.creativeId"
                class="select"
                clearable
                placeholder="请输入"
                @change="(val: any) => onChange(val, 'creativeId')"
            >
                <template #prefix>
                    <span class="label">创意ID</span>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item prop="name">
            <el-input
                v-model="formData.name"
                class="select"
                clearable
                placeholder="请输入"
                @change="(val: any) => onChange(val, 'name')"
            >
                <template #prefix>
                    <span class="label">创意名称</span>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="industryCode">
            <el-select
                v-model="formData.industryCode"
                clearable
                placeholder="请选择"
                class="select"
                filterable
                @change="(val: any) => onChange(val, 'industryCode')"
            >
                <template #prefix>
                    <div class="label">创意行业</div>
                </template>
                <el-option v-for="item in industryList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
        </el-form-item>
        <el-form-item prop="screenType">
            <el-select
                v-model="formData.screenType"
                clearable
                multiple
                collapse-tags
                placeholder="请选择"
                class="select"
                @change="(val: any) => onChange(val, 'screenType')"
            >
                <template #prefix>
                    <div class="label">屏幕类型</div>
                </template>
                <el-option
                    v-for="(item, index) in screenTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item prop="expireTime">
            <el-date-picker
                v-model="formData.expireTime"
                format="YYYY/MM/DD"
                type="date"
                placeholder="请选择日期"
                @change="(val: any) => onChange(val, 'expireTime')"
            >
            </el-date-picker>
        </el-form-item>
        <el-form-item prop="auditStatus">
            <el-select
                v-model="formData.auditStatus"
                clearable
                multiple
                collapse-tags
                placeholder="请选择"
                class="select"
                @change="(val: any) => onChange(val, 'auditStatus')"
            >
                <template #prefix>
                    <div class="label">创意状态</div>
                </template>
                <el-option label="通过" :value="1"></el-option>
                <el-option label="审核中" :value="0"></el-option>
                <el-option label="拒绝" :value="2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item prop="mediaType">
            <el-select
                v-model="formData.mediaType"
                clearable
                placeholder="请选择"
                class="select"
                @change="(val: any) => onChange(val, 'mediaType')"
            >
                <template #prefix>
                    <div class="label">媒体类型</div>
                </template>
                <el-option label="全选" :value="0"></el-option>
                <el-option label="梯内" :value="1"></el-option>
                <el-option label="梯外" :value="2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button @click="resetForm"> 重置 </el-button>
            <el-button type="primary" @click="handleAdd">新建创意</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from 'vue';
import { FormData } from '../ModelDefines';
import { getIndustrySecondList } from '@/api/delivery/customerManage';

import { screenTypeList } from '@/utils/config';

const formRef = ref<any>(null);
const industryList = ref<any>([]);
const formData = reactive(FormData);

const emit = defineEmits(['searchChange', 'handleAdd']);

const onChange = (val: string, key: string) => {
    formData[key] = val;
    emit('searchChange', formData);
};

const resetForm = () => {
    formRef.value?.resetFields();
    emit('searchChange', formData, { pageNum: 1 });
};

const handleAdd = () => {
    emit('handleAdd');
};

onBeforeUnmount(() => {
    resetForm();
});

onMounted(async () => {
    try {
        const data = await getIndustrySecondList();
        industryList.value = data;
    } catch (error) {
        console.log(error);
    }
});
</script>

<style lang="scss" scoped>
::v-deep(.time .el-input__inner) {
    padding-left: 95px;
}
::v-deep(.el-form--inline .el-form-item) {
    width: 280px;
    vertical-align: baseline;
}
::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    display: flex;
    align-items: center;
    width: 280px;
}
::v-deep(.el-date-editor) {
    .el-input__prefix .el-input__icon {
        display: none;
    }

    .el-input__prefix-inner {
        &::before {
            content: '创意有效期';
            padding-right: 15px;
            font-size: 14px;
            color: #808080;
        }
    }
    .el-input__inner {
        padding-left: 96px;
    }
}
</style>
